<template>
  <view class="wrap" >
    <view class="main" v-if="orderData">
      <view class="state-box" :class="stateStyle">
        <view class="iconfont" :class="stateIcon"></view>
        <view class="b-state">
          <view class="s-tit">{{orderData.status_text}}</view>
          <!--					<view class="s-desc">该笔订单已完成</view>-->
        </view>
      </view>
      <view class="box">
        <view class="b-row">
          <view class="b-tit">送宠方式</view>
          <view class="b-cont">
            <text class="s-text" v-if="orderData.enjoy_type_text == '送至宠物店'">送至门店</text>
            <text class="s-text" v-if="orderData.enjoy_type_text != '送至宠物店'">{{orderData.enjoy_type_text}}</text>
          </view>
        </view>

        <view class="b-row">
          <view class="b-tit">门店地址</view>
          <view class="b-cont">
            <text class="s-text">{{orderData.shop_data.address}}</text>
          </view>
        </view>

        <view class="b-row">
          <view class="b-tit">联系电话</view>
          <view class="b-cont">
            <text class="s-text">{{orderData.shop_data.phone}}</text>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="gift-head">
          <view class="iconfont icon-shop"></view>
          <view class="s-name">{{orderData.shop_data.name}}</view>
        </view>
        <view class="gift-list">
          <view class="gift-item" @click="onJumpGoodsDetail(item.goods_type, item.goods_id)"
                v-for="(item, index) in orderData.goods_list" :key="index">
            <view class="b-left">
              <image :src="item.goods_cover" mode="aspectFill"></image>
            </view>
            <view class="b-main">
              <view class="b-title">{{item.goods_name}}</view>
              <view class="b-spec">
                <view class="s-value">{{item.goods_names}}</view>
                <view class="b-action">
                  <view class="s-btn f-apply" @click.stop="onJumpRefund(item.order_item_no)"
                        v-if="item.opt_actions.indexOf('can_refund') !== -1">
                    退款</view>
                  <view class="s-btn f-result" @click.stop="onJumpRefund(item.order_item_no)"
                        v-if="item.opt_actions.indexOf('refund_result') !== -1">退款结果</view>
                </view>
              </view>
              <!-- 宠物信息 -->
              <view class="pet-info" v-if="item.pet_breed || item.pet_gender || item.pet_age || item.is_sterilized">
                <view class="pet-photo" v-if="item.pet_photo">
                  <image :src="item.pet_photo" mode="aspectFill" @click.stop="previewImage(item.pet_photo)"></image>
                </view>
                <view class="pet-details">
                  <view class="pet-item" v-if="item.pet_breed">
                    <text class="label">品种：</text>
                    <text class="value">{{item.pet_breed}}</text>
                  </view>
                  <view class="pet-item" v-if="item.pet_gender">
                    <text class="label">性别：</text>
                    <text class="value">{{item.pet_gender === 1 ? '公' : '母'}}</text>
                  </view>
                  <view class="pet-item" v-if="item.pet_age">
                    <text class="label">年龄：</text>
                    <text class="value">{{item.pet_age}}岁</text>
                  </view>
                  <view class="pet-item" v-if="item.is_sterilized !== undefined">
                    <text class="label">绝育：</text>
                    <text class="value">{{item.is_sterilized ? '是' : '否'}}</text>
                  </view>
                </view>
              </view>
              <view class="b-fund">
                <view class="b-amount">
                  <view class="s-num">¥{{item.payment}}</view>
                  <view class="s-worth" v-if="item.payment != item.goods_price">
                    ¥{{item.goods_price}}
                  </view>
                </view>
                <view class="s-count"></view>
              </view>
            </view>
          </view>
          <view class="gift-note">
            <view class="b-tit">备注信息</view>
            <view class="b-cont">
              <view class="s-text">{{orderData.note}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="b-head">托运信息</view>
        <view class="info-section">
          <view class="section-title">托运人信息</view>
          <view class="info-row">
            <view class="info-item">
              <text class="label">姓名</text>
              <text class="value">{{orderData.sender_name}}</text>
            </view>
            <view class="info-item">
              <text class="label">电话</text>
              <text class="value">{{orderData.sender_phone}}</text>
            </view>
          </view>
        </view>
        <view class="info-section">
          <view class="section-title">接收人信息</view>
          <view class="info-row">
            <view class="info-item">
              <text class="label">姓名</text>
              <text class="value">{{orderData.receiver_name}}</text>
            </view>
            <view class="info-item">
              <text class="label">电话</text>
              <text class="value">{{orderData.receiver_phone}}</text>
            </view>
            <view class="info-item full-width">
              <text class="label">地址</text>
              <text class="value">{{orderData.receiver_address}}</text>
            </view>
          </view>
        </view>
        <view class="info-section">
          <view class="section-title">其他信息</view>
          <view class="info-row">
            <view class="info-item">
              <text class="label">出发日期</text>
              <text class="value">{{orderData.departure_date}}</text>
            </view>
            <view class="info-item full-width">
              <text class="label">备注</text>
              <text class="value">{{orderData.shipping_remark}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="b-row">
          <view class="b-tit">订单编号</view>
          <view class="b-cont">
            <text class="s-copy" @click="onCopy(orderData.order_no)">点击复制</text>
            <text class="s-text">{{orderData.order_no}}</text>
          </view>
        </view>
        <view class="b-row">
          <view class="b-tit">套餐总价</view>
          <view class="b-cont">
            <text class="s-text">¥{{orderData.total_price}}</text>
          </view>
        </view>
        <view class="b-row">
          <view class="b-tit">优惠金额</view>
          <view class="b-cont">
            <text class="s-text">¥{{orderData.discount}}</text>
          </view>
        </view>
        <view class="b-row">
          <view class="b-tit">应付金额</view>
          <view class="b-cont">
            <text class="s-text">¥{{orderData.payment}}</text>
          </view>
        </view>
        <view class="b-row" v-if="orderData.balance">
          <view class="b-tit">余额支付</view>
          <view class="b-cont">
            <text class="s-text">¥{{orderData.balance}}</text>
          </view>
        </view>
        <view class="b-row" v-if="!orderData.payment_time">
          <view class="b-tit">需付现金</view>
          <view class="b-cont">
            <text class="s-text">¥{{leftAmount}}</text>
          </view>
        </view>
        <view class="b-row" v-if="orderData.payment_time">
          <view class="b-tit">现金支付</view>
          <view class="b-cont">
            <text class="s-text">¥{{orderData.payment_rel}}</text>
          </view>
        </view>
        <view class="b-row" v-if="orderData.payment_time">
          <view class="b-tit">支付时间</view>
          <view class="b-cont">
            <text class="s-text">{{timeFormat(orderData.payment_time)}}</text>
          </view>
        </view>
        <view class="b-row">
          <view class="b-tit">下单时间</view>
          <view class="b-cont">
            <text class="s-text">{{timeFormat(orderData.created_at)}}</text>
          </view>
        </view>
      </view>
      <view class="box" v-if="orderData.status == 1">
        <view class="b-head">支付方式</view>
        <radio-group @change="onRadioChange" v-for="(item, index) in payList" :key="index">
          <view class="b-row f-pay">
            <view class="b-tit">
              <view class="iconfont" :class="'icon-'+item.icon"></view>
              <view class="s-tit">{{item.name}}</view>
            </view>
            <view class="b-cont">
              <radio value="wechat" :checked="item.checked" color="#FF9626" />
            </view>
          </view>
        </radio-group>
      </view>

    </view>
    <!-- 加载中 -->
    <load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
    <!-- 首页 -->
    <app-home></app-home>
  </view>
</template>

<script>
import {
  getOrderDetail,
  orderCancel,
  oncePay
} from '@/service/api/order.js'
import {
  requestPayment
} from '@/service/request/main.js'
import mixinsAuth from '@/mixins/auth.js'
import mixinsCommon from '@/mixins/common.js'
export default {
  mixins: [mixinsCommon, mixinsAuth],
  data() {
    return {
      orderData: null,
      submitIn: false,
      payList: [{
        icon: 'pay-wechat',
        alias: 'wechat',
        name: '微信支付',
        checked: true
      }],
      payIndex: 0,
      loadingType: 1,
      loadingText: '',

    }
  },
  onLoad(options) {
    this.orderNo = options.order_no
    this.loadDetail()
    if (options.submit) {
      this.submitIn = true
    }
  },
  computed: {
    topBg() {
      return this.$store.getters.globalConfig.style_detail_bg || ''
    },
    stateStyle() {
      return {
        'f-wait': this.orderData.status === 1,
        'f-done': this.orderData.status === 2,
        'f-cancel': this.orderData.status === 3,
      }
    },
    stateIcon() {
      return {
        'icon-order-wait': this.orderData.status === 1,
        'icon-order-done': this.orderData.status === 2,
        'icon-order-cancel': this.orderData.status === 3,
      }
    },
    leftAmount() {
      return (this.orderData.payment - this.orderData.balance).toFixed(2)
    }
  },
  methods: {
    loadDetail() {
      getOrderDetail(this.orderNo).then(([err, res]) => {
        console.log('getOrderDetail', err, res)
        if (!err) {
          this.loadingType = -1
          this.orderData = res
        } else {
          this.loadingType = 3
          this.loadingText = err.data.msg || '加载失败'
        }
      })
    },
    onRadioChange(e) {
      console.log('onRadioChange', e)
    },
    onOrderList() {
      uni.reLaunch({
        url: '/pages/order/list'
      })
    },
    onJumpHome() {
      uni.reLaunch({
        url: '/pages/home/index'
      })
    },
    onJumpRefund(orderItemNo) {
      let pageUrl = '/pages/order/refund?order_no=' + this.orderData.order_no
      if (orderItemNo) {
        pageUrl += '&order_item_no=' + orderItemNo
      }
      uni.navigateTo({
        url: pageUrl
      })
    },
    onJumpInvoice() {
      uni.navigateTo({
        url: '/pages/order/invoice?order_no=' + this.orderData.order_no
      })
    },
    onJumpGoodsDetail(goodsType, goodsId) {
      if (goodsType === 'course') {
        uni.navigateTo({
          url: '/pages/course/detail?cid=' + goodsId
        })
      } else if (goodsType === 'schedule') {
        uni.navigateTo({
          url: '/pages/schedule/detail?sid=' + goodsId
        })
      }
    },
    onCancel() {
      orderCancel(this.orderNo).then(([err, res]) => {
        console.log('orderCancel', err, res)
        if (!err) {
          this.$logic.showToast('取消成功')
          this.loadDetail()
        }
      })
    },
    onOncePay() {
      const payAlias = this.payList[this.payIndex].alias
      requestPayment(this.orderNo, payAlias)
    }
  }
}
</script>

<style lang="scss">
page {
  padding-bottom: env(safe-area-inset-bottom);
  background: $pq-bg-color;
}

.wrap {
  padding-top: 80upx;
  padding-bottom: 150upx;
  // background-image: url(/static/imgs/login-bg.png);
  background-repeat: no-repeat;
  background-size: contain;

}

.main {
  padding: 20upx;
}

.state-box {
  height: 160upx;
  display: flex;
  align-items: center;
  justify-content: center;

  // &.f-wait {
  // 	color: #FFC300;
  // }

  // &.f-done {
  // 	color: #DA5650;
  // }

  // &.f-cancel {
  // 	color: #666;
  // }

  .iconfont {
    margin-right: 20upx;
    font-size: 90upx;
    color: $pq-active-color;
  }

  .b-state {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .s-tit {
      color: $pq-main-color;
      font-size: 40upx;
      font-weight: bold;
    }

    .s-desc {
      font-size: 24upx;
      color: $pq-minor-color;
    }
  }
}

.gift-head {
  padding-bottom: 20upx;
  font-size: 28upx;
  color: $pq-main-color;
  background: #fff;
  border-bottom: 2upx solid #eee;
  display: flex;
  align-items: center;

  .iconfont {
    font-size: 36upx;
    margin-right: 20upx;
  }
}

.gift-list {
  margin-top: 30upx;
  background: #fff;

  .gift-item {
    margin-bottom: 30upx;
    display: flex;
    align-items: flex-start;
    padding-bottom: 20upx;
    border-bottom: 1upx solid #eee;

    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }

    .b-left {
      width: 140upx;
      height: 140upx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
        border-radius: 10upx;
      }
    }

    .b-main {
      margin-left: 20upx;
      flex: 1;
      min-height: 140upx;
      display: flex;
      flex-direction: column;

      .b-title {
        font-size: 28upx;
        color: $pq-main-color;
        font-weight: bold;
        margin-bottom: 12upx;
      }

      .b-spec {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12upx;

        .s-value {
          font-size: 24upx;
          color: $pq-minor-color;
        }

        .b-action {
          margin-left: 20upx;
          display: flex;
          align-items: center;

          .s-btn {
            height: 44upx;
            border-radius: 22upx;
            padding: 0 20upx;
            line-height: 44upx;
            font-size: 24upx;

            &.f-apply {
              color: #666;
              background: none;
              border: 1upx solid #eee;
            }

            &.f-result {
              color: #fff;
              background: $pq-active-color;
            }
          }
        }
      }

      .pet-info {
        background: #f8f8f8;
        border-radius: 8upx;
        padding: 16upx;
        margin-bottom: 12upx;
        display: flex;
        align-items: flex-start;

        .pet-photo {
          width: 120upx;
          height: 120upx;
          margin-right: 16upx;
          flex-shrink: 0;

          image {
            width: 100%;
            height: 100%;
            border-radius: 6upx;
          }
        }

        .pet-details {
          flex: 1;

          .pet-item {
            display: flex;
            align-items: center;
            margin-bottom: 8upx;
            font-size: 24upx;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              color: #999;
              width: 70upx;
              flex-shrink: 0;
            }

            .value {
              color: $pq-main-color;
              flex: 1;
            }
          }
        }
      }

      .b-fund {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;

        .b-amount {
          display: flex;
          align-items: baseline;

          .s-worth {
            margin-left: 16upx;
            font-size: 24upx;
            color: $pq-minor-color;
            text-decoration: line-through;
          }

          .s-num {
            font-size: 32upx;
            color: $pq-active-color;
            font-weight: bold;
          }
        }

        .s-count {
          font-size: 24upx;
          color: $pq-minor-color;
        }
      }
    }
  }

  .gift-note {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .b-tit {
      width: 200upx;
      font-size: 28upx;
      color: #333;
    }

    .b-cont {
      width: 480upx;
      font-size: 28upx;
      color: #333;
    }
  }
}

.box {
  margin-top: 30upx;
  padding: 30upx;
  background: #fff;
  border-radius: 20upx;

  .b-head {
    margin-bottom: 30upx;
    padding-left: 20upx;
    color: $pq-main-color;
    font-size: 28upx;
    font-weight: bold;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 24upx;
      width: 4upx;
      background-color: $pq-active-color;
      border-radius: 4upx;
      opacity: 0.8;
    }
  }

  .b-row {
    padding: 15upx 0;
    display: flex;
    justify-content: space-between;

    &.f-link {
      align-items: center;
    }

    &.f-pay {
      align-items: center;
      justify-content: space-between;

      .b-tit {
        width: 320upx;
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 50upx;
          color: #6CB37A;
        }

        .s-tit {
          margin-left: 10upx;
          font-size: 28upx;
        }
      }

      .b-cont {
        width: auto;

        radio {
          transform: scale(0.8)
        }
      }
    }

    .b-tit {
      font-size: 28upx;
      width: 180upx;
      color: $pq-main-color;
    }

    .b-cont {
      // width: 510upx;
      display: flex;
      align-items: center;
      font-size: 28upx;
      color: $pq-main-color;
    }

    .s-copy {
      margin-right: 20upx;
      font-size: 24upx;
      color: $pq-active-color;
    }

    .s-province,
    .s-city,
    .s-area {
      margin-right: 10upx;
    }

    .s-phone {
      margin-left: 20upx;
    }

    .s-text {
      color: $pq-minor-color;
    }

    .s-btn {
      padding: 0 30upx;
      background: #FFC300;
      color: #fff;
      font-size: 24upx;
      height: 60upx;
      line-height: 60upx;
      border-radius: 30upx;
    }
  }
}

.navbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100upx;
  background: #fff;
  border-top: 1upx solid #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1upx solid #eee;

  .b-order {
    margin-left: 20upx;
    padding: 0 30upx;
    height: 60upx;
    line-height: 60upx;
    border-radius: 30upx;
    border: 2upx solid $pq-active-color;
    font-size: 26upx;
    color: $pq-active-color;
    letter-spacing: 4upx;
  }

  .b-action {
    margin: 0 30upx;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .b-btn {
      margin-left: 20upx;
      background: $pq-active-color;
      height: 60upx;
      border-radius: 30upx;
      padding: 0 30upx;
      line-height: 60upx;
      font-size: 26upx;
      color: #fff;
      letter-spacing: 4upx;

      &.f-pay {
        color: #fff;
        background: $pq-active-color;
      }

      &.f-cancel {
        color: #666;
        background: none;
        border: 2upx solid #eee;
      }

      &.f-apply {
        color: #666;
        background: none;
        border: 2upx solid #eee;
      }

      &.f-result {
        color: #fff;
        background: $pq-active-color;
      }
    }
  }
}

.pet-info {
  margin-top: 16upx;
  padding: 16upx;
  background: #f8f8f8;
  border-radius: 8upx;

  .pet-item {
    display: flex;
    align-items: center;
    margin-bottom: 8upx;
    font-size: 24upx;
    color: $pq-minor-color;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #999;
      margin-right: 8upx;
    }

    .value {
      color: $pq-main-color;
    }
  }

  .pet-photo {
    margin-top: 12upx;

    image {
      width: 120upx;
      height: 120upx;
      border-radius: 8upx;
    }
  }
}

.info-section {
  margin-bottom: 20upx;
  padding-bottom: 20upx;
  border-bottom: 1upx solid #eee;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .section-title {
    font-size: 26upx;
    color: #666;
    margin-bottom: 16upx;
    position: relative;
    padding-left: 20upx;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6upx;
      height: 24upx;
      background: $pq-active-color;
      border-radius: 3upx;
    }
  }
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20upx;

  .info-item {
    width: 50%;
    margin-bottom: 16upx;
    display: flex;
    align-items: center;

    &.full-width {
      width: 100%;
    }

    .label {
      color: #999;
      font-size: 26upx;
      width: 120upx;
      flex-shrink: 0;
    }

    .value {
      flex: 1;
      color: $pq-main-color;
      font-size: 26upx;
    }
  }
}
</style>